<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
<script>
  /** @type {HTMLCanvasElement} */
  let canvas = document.getElementById('canvas');
  let gl = canvas.getContext('webgl');
  gl.clearColor(0.1,0.5,0.4,0.3);
  gl.clear(gl.COLOR_BUFFER_BIT)

  let vertexSource = `
    attribute vec4 position;
    void main(){
      gl_Position = position;
    }
  `;
  let fragmentSource = `
    void main(){
      gl_FragColor = vec4(0.0,0.4,0.6,0.5);
    }
  `;

  function initShader(gl,vertexSource,fragmentSource){
    // 创造着色器对象
    let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader,vertexSource);
    gl.shaderSource(fragmentShader,fragmentSource)
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    let program = gl.createProgram();
    gl.attachShader(program,vertexShader)
    gl.attachShader(program,fragmentShader)
    gl.linkProgram(program);
    gl.useProgram(program);
    return program
  }

  let program = initShader(gl,vertexSource,fragmentSource);
  let position = gl.getAttribLocation(program,'position');

  let data = new Float32Array([
    -0.5,0.5,0.0,
    0.5,0.5,0.0,
    0.5,-0.5,0.0,

    -0.5,-0.5,0.0,
    -0.5,0.5,0.0,
    0.5,-0.5,0.0
  ])
  let buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
  gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
  gl.vertexAttribPointer(position,3,gl.FLOAT,false,0,0);
  gl.enableVertexAttribArray(position);
  gl.drawArrays(gl.TRIANGLES,0,6)
  // gl.drawArrays(gl.LINE_LOOP,0,4)
</script>